<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue';
// import dayjs from 'dayjs';
import {
  addScreenBoardPosition,
  deleteScreenBoardPosition,
  updateScreenBoardPosition
} from '@/service/api/modules/manage/config-manage/screen-board';
// import { useAuthStore } from '@/store/modules/auth';

// const authStore = useAuthStore();

const commonSearchRef = ref(null);
const searchParams = ref({
  locationNo: null,
  locationName: null
});
const searchFormList = [
  {
    type: 'input',
    key: 'locationNo',
    label: '货位编码',
    placeholder: '请输入货位编码',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  },
  {
    type: 'input',
    key: 'locationName',
    label: '货位名称',
    placeholder: '请输入货位名称',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  }
];

const tableRef = ref(null);
const tabaleSelect = ref([]);
const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'locationNo',
    dataIndex: 'locationNo',
    title: '货位编码',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'locationName',
    dataIndex: 'locationName',
    title: '货位名称',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'size',
    dataIndex: 'size',
    title: '货位大小',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '录入员',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'updateBy',
    dataIndex: 'updateBy',
    title: '修改人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    title: '修改时间',
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

function tableSelectChange(val) {
  tabaleSelect.value = val;
}

const currentType = ref('add');

const { handleClose, handleLoading, handleShow, updateModalOptions } = window.$useModal({
  modalOption: {
    title: '新增网板仓位定义',
    width: '600px',
    height: '285px',
    destroyOnClose: true,
    confirmBtnText: '保存'
  },
  formData: {
    locationNo: null,
    locationName: null,
    size: null
  },
  formList: [
    {
      type: 'input',
      key: 'locationNo',
      label: '货位编码',
      placeholder: '请输入货位编码',
      span: 24,
      rule: [{ required: true, message: '请输入货位编码', trigger: 'blur' }]
    },
    {
      type: 'input',
      key: 'locationName',
      label: '货位名称',
      placeholder: '请输入货位名称',
      span: 24,
      rule: [{ required: true, message: '请输入货位名称', trigger: 'blur' }]
    },
    {
      type: 'input',
      key: 'size',
      label: '货位大小',
      placeholder: '请输入货位大小',
      span: 24
    }
  ],
  onClose: () => {},
  onOk: data => {
    handleLoading(true);
    let pro;
    let msg = '';
    if (currentType.value === 'add') {
      msg = '新增';
      pro = addScreenBoardPosition(data);
    } else {
      msg = '修改';
      // const params = {
      //   ...data,
      //   updateDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      //   updateBy: authStore.userInfo.user.nickName || authStore.userInfo.user.userName
      // };
      pro = updateScreenBoardPosition(data);
    }
    pro
      .then(({ error }) => {
        if (!error) {
          window.$message.success(`${msg}网板仓位定义成功`);
          tableRef.value.tableSelectChange([]);
          handleClose();
          search();
        }
      })
      .finally(() => {
        handleLoading(false);
      });
  }
});

function handleAdd(type) {
  currentType.value = type;
  if (type === 'edit') {
    // 修改
    updateModalOptions({
      title: '修改网板仓位定义'
    });
    handleShow(tabaleSelect.value[0]);
  } else {
    // 新增
    updateModalOptions({
      title: '新增网板仓位定义'
    });
    handleShow({
      locationNo: null,
      locationName: null,
      size: null
    });
  }
}

function handelDel() {
  window.$modal.confirm({
    title: (
      <div>
        确定将所勾选的项进行<span class="color-red font-bold">删除</span>操作吗？
      </div>
    ),
    onOk: () => {
      deleteScreenBoardPosition(tabaleSelect.value).then(({ error }) => {
        if (!error) {
          window.$message.success('删除网板仓位定义成功');
          tableRef.value.tableSelectChange([]);
          search();
        }
      });
    },
    onCancel: () => {}
  });
}

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value.locationNo = null;
    searchParams.value.locationName = null;
    search();
  });
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>
    <Table
      ref="tableRef"
      v-model:searchParams="searchParams"
      :column="column"
      show-row-selection
      row-key="id"
      auto-generate-uuid
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/qms/scrscreen/scrscreenLocation/pageList"
      @table-select-change="tableSelectChange"
    >
      <template #title>
        <AButton
          v-hasAuth="['manage:config-manage:screen-position-definition:add']"
          type="primary"
          class="mini-btn mr-8px"
          size="small"
          ghost
          @click="handleAdd('add')"
        >
          <template #icon>
            <PlusOutlined class="align-sub" />
          </template>
          新增
        </AButton>
        <AButton
          v-hasAuth="['manage:config-manage:screen-position-definition:update']"
          type="primary"
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="tabaleSelect.length != 1"
          @click="handleAdd('edit')"
        >
          <template #icon>
            <EditOutlined class="align-sub" />
          </template>
          修改
        </AButton>

        <AButton
          type="primary"
          danger
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="!tabaleSelect.length"
          @click="handelDel"
        >
          <template #icon>
            <DeleteOutlined class="align-sub" />
          </template>
          删除
        </AButton>
      </template>
    </Table>
  </div>
</template>

<style lang="scss" scoped></style>
